<template>
  <gg-form-item :tip="tip" :label="label" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout">
    <view class="gg-code-area">
      <view class="gg-code-input-area" v-bind:style="inputAreaStyle">
        <input class="gg-code-input-item" placeholder-class="gg-code-input-item-placeholder" v-model="localVal" :maxlength="maxlength"
          :placeholder="placeholder" @input="updateInput" @blur="onBlur" />
      </view>
      <view class="gg-code-button-area" v-bind:style="buttonAreaStyle">
        <button class="gg-code-button-item " :class="btnDisabled?'gg-code-button-wait':''" :disabled="btnDisabled" @tap="click">{{btnText}}</button>
      </view>
    </view>
  </gg-form-item>
</template>
<script>
import MixinsCommon from '../mixins/mixins-common.js';
export default {
  mixins: [MixinsCommon],
  name: "GgInputBut",
  inject: {
    ggFormGroup: {
      default() {
        return null
      }
    }
  },
  props: {
    label: {
      type: String,
      default: ""
    },
    maxlength: {
      type: [Number, String],
      default: -1
    },
    value: {
      type: [Number, String],
      default: ""
    },
    btnText: {
      type: String,
      default: "发送"
    },
    btnWidth: {
      type: Number,
      default: 80
    },
    message: {
      type: String,
      default: ""
    },
    messageDisplay: {
      type: Boolean,
      default: false
    },
    btnDisabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      localVal: '',
      buttonAreaStyle: '',
      inputAreaStyle: '',
    };
  },
  watch: {
    value(newVal) {
      this.localVal = newVal;
    }
  },
  created() {
    this.localVal = this.value;
    this._initStyle();
  },
  methods: {
    click(e) {
      if (this.btnDisabled) {
        return;
      }
      this.$emit('click', e);
    },
    updateInput(e) {
      this.$emit('input', this.localVal);
    },
    _initStyle() {
      this.buttonAreaStyle = 'width:' + this.btnWidth + 'px;';
      this.inputAreaStyle = 'width:calc(100% - ' + this.btnWidth + 'px - 10px);';
    }
  }
};
</script>

<style>
.gg-code-area {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}
.gg-code-input-area {
  width: calc(100% - 80px - 10px);
  float: left;
}
.gg-code-input-item {
  height: 35px;
  line-height: 35px;
}
.gg-code-input-item-placeholder {
  font-size: 14px;
}
.gg-code-button-area {
  width: 80px;
  float: right;
  height: 35px;
}
.gg-code-button-item {
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  background-color: #007aff;
  color: #ffffff;
}
</style>